<template>
  <div>
    <el-breadcrumb style="margin-bottom: 20px" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索 -->
    <div class="search">
      <div>
        <div>
          <el-input
            placeholder="请输入内容"
            v-model="input3"
            class="input-with-select"
          >
            <el-select v-model="search" slot="prepend" placeholder="请选择">
              <el-option label="餐厅名" value="1"></el-option>
              <el-option label="订单号" value="2"></el-option>
              <el-option label="用户电话" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
      <div>
        <el-button @click="empty">清空筛选条件</el-button>
      </div>
      {{ search }}
    </div>
    <el-row class="elRow">
      <el-button
        @click="fundmanger"
        type="primary"
        icon="el-icon-circle-plus-outline"
        >添加基金经理</el-button
      >
    </el-row>
    <!-- 表格 -->
    <div id="table">
      <el-table
        :data="fundManagerList"
        style="width: 100%"
        max-height="400"
        :border="true"
      >
        <el-table-column fixed prop="mid" label="基金经理id" width="150">
        </el-table-column>
        <el-table-column prop="mname" label="基金经理名称" width="120">
        </el-table-column>
        <el-table-column prop="avatar" label="头像" width="120">
          <template slot-scope="scope">
            <el-avatar
              :src="scope.row.avatar"
            ></el-avatar>
          </template>
        </el-table-column>

        <el-table-column prop="educationLevel" label="最高学历" width="120">
        </el-table-column>
        <el-table-column prop="department" label="专业" width="300">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="160">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[3, 5, 7, 10]"
        :page-size="100"
        :pager-count="17"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- From对话框 -->
    <el-dialog title="" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="基金经理名称">
          <el-input
            placeholder="请输入基金经理名称"
            v-model="form.mname"
          ></el-input>
        </el-form-item>
        <!-- 头像 -->
        <!-- <el-form-item label="基金经理头像" class="upload">
        <el-upload
          action="http://dev.woniulab.com:7689/minio/upload/{bucketName}"
          list-type="picture-card"
          :on-success="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item> -->
        <el-form-item label="最高学历">
          <el-input
            placeholder="最高学历 例:硕士"
            v-model="form.educationLevel"
          ></el-input>
        </el-form-item>
        <el-form-item label="毕业院校">
          <el-input
            v-model="form.graduateSchool"
            placeholder="毕业院校 例:上海交通大学"
          ></el-input>
        </el-form-item>
        <el-form-item label="专业">
          <el-input
            v-model="form.department"
            placeholder="请输入专业 例:金融系"
          ></el-input>
        </el-form-item>
        <el-form-item label="称呼" class="select">
          <el-select v-model="form.calls" placeholder="经理的称呼">
            <el-option label="先生" value="先生"></el-option>
            <el-option label="女士" value="女士"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自我介绍">
          <el-input
            type="textarea"
            v-model="form.selfIntroduction"
            placeholder="请输入自我介绍内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="背景经历">
          <el-input
            type="textarea"
            v-model="form.background"
            placeholder="请输入背景经历内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="queding">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers(
  "FundManagerManagement"
);
export default {
  data() {
    return {
      search: "",
      input3: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        // mname: "", //名字
        // graduateSchool: "", //毕业院校
        // educationLevel: "", //最高学历
        // department: "", //专业
        // selfIntroduction: "", //自我介绍
        // background: "", //背景经历
        // calls: "先生", //性别
      },
      formLabelWidth: "120px",
    };
  },
  computed: {
    ...mapState(["fundManagerList", "total", "page", "limit"]),
  },
  created() {
    this.FundManagerManagementList();
  },
  methods: {
    ...mapActions([
      "FundManagerManagementList",
      "Showlimit",
      "NextPage",
      "DeletefundManager",
      "updatefundManager",
    ]),
    empty() {
      this.$message({
        message: "恭喜你，这是一条成功消息",
        type: "success",
      });
      this.input3 = "";
    },
    handleSizeChange(val) {
      this.Showlimit(val);
    },
    handleCurrentChange(val) {
      this.NextPage(val);
    },
    // 新增经理
    fundmanger() {
      this.$router.push({
        path: "/home/AddFundManagerManagement",
      });
    },
    handleEdit(index, row) {
      console.log(row);
      this.dialogFormVisible = true;
      this.form = row;
    },
    handleDelete(index, { mid }) {
      this.DeletefundManager(mid);
    },
    //修改
    queding() {
      this.dialogFormVisible = false;
      this.updatefundManager(this.form);
    },
  },
};
</script>

<style scoped lang="scss">
.search {
  margin-left: 100px;
  display: flex;
  line-height: 0;
}
.elRow {
  line-height: 0;
  margin: 20px;
  text-align: right;
  margin-right: 100px;
}
#table {
  width: 910px;
  height: 400px;
  margin: 0 auto;
}
</style>